<!DOCTYPE html>
<!-- saved from url=(0078)https://meyerweb.github.io/csstdg4figs/12-flexbox/aligncontent_extraspace.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Flex Items: align-content</title> 
<style>
head {
	display: block;
	}
style#editme {
	display: block;
	-webkit-user-modify: read-write-plaintext-only;
	white-space: pre-wrap;
	padding: 1ch 2ch; margin: 2ch;
	border: 0.25ch solid rgba(0,0,0,0.33);
	border-radius: 1ch;
	background-color: hsl(120,20%,90%);
	font: 1.2rem Consolas, "Courier New", Courier, monospace;
	max-height: 50vh;
	overflow: auto;
	}
style#editme::before {
	content: "Editable CSS";
	display: block;
	margin: -1ch -2ch 1em;
	padding: 0.75ch 1ch 0.25ch;
	background: rgba(0,42,0,0.15);
	color: #666;
	border-bottom: 2px solid rgba(0,0,0,0.33);
	font-weight: bold;
	font-family: sans-serif;
	text-align: center;
}

body {
    font-family: Verdana, Geneva, sans-serif;
    font-size: 1.2em;
    padding: 1em;
}

body * {
	font-family: "Myriad Pro",Myriad,"Liberation Sans","Nimbus Sans L","Helvetica Neue";
}
style,
div > div {
	font-family: "ubuntu mono", Consolas, monospace;
}
body {
  padding: 10px; 
  display: flex; 
  justify-content: space-evenly; 
  flex-wrap: wrap;
  font-size: 25px;
  text-align: center;
}
div {
  background-color: rgba(0,0,0,0.1);
}
article {
  position: relative; 
  width: 320px;
}
article > div {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  flex-wrap: wrap;
  border: 1px dashed;
  height: 500px;
}
div > div {
  border: 1px solid;
  flex: 1 0 auto;
  background-color: rgb(208,208,208);
  letter-spacing: 2px;
}
.stretch {
  flex: 0 1 0;
}
.k {
  flex: 1 0 95%;
}
p {
  margin: 0 -20px 40px;
}
.stretch {
  align-self: stretch;
  width: 1px; 
  margin-left: -2px;
  background-color: transparent;
  border-color: transparent;
}
.stretch:before {
  content: '';
  position: absolute;
  left: 0; right: 0;
  border-top: 1px solid red;
}
.e:after,
.f:after,
.k:after {
  content: '';
  left: 0; right: 0;
  position: absolute;
  border-top: transparent solid 1px;
  border-bottom: 1px solid blue;
  height: 1.2em;
}
div[style*=stretch] div:after {
  content: none;
}
div[style*=stretch] .f:before,
div[style*=stretch] .k:before,
article:last-of-type p:before {
  content: '';
  left: 0; right: 0;
  position: absolute;
  border-bottom: 1px solid blue;
  transform: translatey(-1px);
}
.stretch:last-of-type:before,
article:last-of-type p:before {

  transform: translatey(-2px);
}
</style>
</head>
<body>

<article>
<div style="align-content: stretch;">
  <div class="a">A</div>
  <div class="b">BB<br>BB</div>
  <div class="c">CCC<br>CCC<br>CCC</div>
  <div class="d">DDDD<br>DDDD<br>DDDD<br>DDDD</div>
  <div class="e">EEEEE<br>EEEEE<br>EEEEE<br>EEEEE<br>EEEEE</div>
  <div class="stretch"></div>
  <div class="f">FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF</div>
  <div class="g">GGGGG<br>GGGGG<br>GGGGG<br>GGGGG<br>GGGGG</div>
  <div class="h">HHHH<br>HHHH<br>HHHH<br>HHHH</div>
  <div class="i">III<br>III<br>III</div>
  <div class="j">JJ<br>JJ</div>
  <div class="stretch"></div>
  <div class="k">K</div>
  <div class="stretch"></div>
</div>
<p>align-content: stretch;垂轴终边溢出 ⤴</p>
</article>




<article>
<div style="align-content: flex-start">
  <div class="a">A</div>
  <div class="b">BB<br>BB</div>
  <div class="c">CCC<br>CCC<br>CCC</div>
  <div class="d">DDDD<br>DDDD<br>DDDD<br>DDDD</div>
  <div class="e">EEEEE<br>EEEEE<br>EEEEE<br>EEEEE<br>EEEEE</div>
  <div class="stretch"></div>
  <div class="f">FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF</div>
  <div class="g">GGGGG<br>GGGGG<br>GGGGG<br>GGGGG<br>GGGGG</div>
  <div class="h">HHHH<br>HHHH<br>HHHH<br>HHHH</div>
  <div class="i">III<br>III<br>III</div>
  <div class="j">JJ<br>JJ</div>
  <div class="stretch"></div>
  <div class="k">K</div>
  <div class="stretch"></div>
</div>
<p>align-content: flex-start;垂轴终边溢出 ⤴</p>
</article>

<article>
<div style="align-content: flex-end">
  <div class="a">A</div>
  <div class="b">BB<br>BB</div>
  <div class="c">CCC<br>CCC<br>CCC</div>
  <div class="d">DDDD<br>DDDD<br>DDDD<br>DDDD</div>
  <div class="e">EEEEE<br>EEEEE<br>EEEEE<br>EEEEE<br>EEEEE</div>
  <div class="stretch"></div>
  <div class="f">FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF</div>
  <div class="g">GGGGG<br>GGGGG<br>GGGGG<br>GGGGG<br>GGGGG</div>
  <div class="h">HHHH<br>HHHH<br>HHHH<br>HHHH</div>
  <div class="i">III<br>III<br>III</div>
  <div class="j">JJ<br>JJ</div>
  <div class="stretch"></div>
  <div class="k">K</div>
  <div class="stretch"></div>
</div>
<p>align-content: flex-end;垂轴起边溢出 ⤴</p>
</article>

<article>
<div style="align-content: center">
  <div class="a">A</div>
  <div class="b">BB<br>BB</div>
  <div class="c">CCC<br>CCC<br>CCC</div>
  <div class="d">DDDD<br>DDDD<br>DDDD<br>DDDD</div>
  <div class="e">EEEEE<br>EEEEE<br>EEEEE<br>EEEEE<br>EEEEE</div>
  <div class="stretch"></div>
  <div class="f">FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF</div>
  <div class="g">GGGGG<br>GGGGG<br>GGGGG<br>GGGGG<br>GGGGG</div>
  <div class="h">HHHH<br>HHHH<br>HHHH<br>HHHH</div>
  <div class="i">III<br>III<br>III</div>
  <div class="j">JJ<br>JJ</div>
  <div class="stretch"></div>
  <div class="k">K</div>
  <div class="stretch"></div>
</div>
<p>align-content: center;垂轴起边终边一起溢出 ⤴</p>
</article>

<article>
<div style="align-content: space-between;">
  <div class="a">A</div>
  <div class="b">BB<br>BB</div>
  <div class="c">CCC<br>CCC<br>CCC</div>
  <div class="d">DDDD<br>DDDD<br>DDDD<br>DDDD</div>
  <div class="e">EEEEE<br>EEEEE<br>EEEEE<br>EEEEE<br>EEEEE</div>
  <div class="stretch"></div>
  <div class="f">FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF</div>
  <div class="g">GGGGG<br>GGGGG<br>GGGGG<br>GGGGG<br>GGGGG</div>
  <div class="h">HHHH<br>HHHH<br>HHHH<br>HHHH</div>
  <div class="i">III<br>III<br>III</div>
  <div class="j">JJ<br>JJ</div>
  <div class="stretch"></div>
  <div class="k">K</div>
  <div class="stretch"></div>
</div>
<p>align-content:  space-between;垂轴终边溢出 ⤴</p>
</article>




<article>
<div style="align-content: space-around;">
  <div class="a">A</div>
  <div class="b">BB<br>BB</div>
  <div class="c">CCC<br>CCC<br>CCC</div>
  <div class="d">DDDD<br>DDDD<br>DDDD<br>DDDD</div>
  <div class="e">EEEEE<br>EEEEE<br>EEEEE<br>EEEEE<br>EEEEE</div>
  <div class="stretch"></div>
  <div class="f">FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF</div>
  <div class="g">GGGGG<br>GGGGG<br>GGGGG<br>GGGGG<br>GGGGG</div>
  <div class="h">HHHH<br>HHHH<br>HHHH<br>HHHH</div>
  <div class="i">III<br>III<br>III</div>
  <div class="j">JJ<br>JJ</div>
  <div class="stretch"></div>
  <div class="k">K</div>
  <div class="stretch"></div>
</div>
<p>align-content:  space-around; 垂轴起边终边一起溢出⤴</p>
</article>




<article>
<div style="align-content: space-evenly;">
  <div class="a">A</div>
  <div class="b">BB<br>BB</div>
  <div class="c">CCC<br>CCC<br>CCC</div>
  <div class="d">DDDD<br>DDDD<br>DDDD<br>DDDD</div>
  <div class="e">EEEEE<br>EEEEE<br>EEEEE<br>EEEEE<br>EEEEE</div>
  <div class="stretch"></div>
  <div class="f">FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF<br>FFFFFF</div>
  <div class="g">GGGGG<br>GGGGG<br>GGGGG<br>GGGGG<br>GGGGG</div>
  <div class="h">HHHH<br>HHHH<br>HHHH<br>HHHH</div>
  <div class="i">III<br>III<br>III</div>
  <div class="j">JJ<br>JJ</div>
  <div class="stretch"></div>
  <div class="k">K</div>
  <div class="stretch"></div>
</div>
<p>align-content:  space-evenly;垂轴起边终边一起溢出 ⤴</p>
</article>

</body></html>